<template>
  <mu-container style="margin-top: 10px;">
    <mu-flex justify-content="center">
      <mu-flex justify-content="center">
        <mu-text-field
          ref="token"
          style="width:500px;"
          v-model="token"
          color="error"
          error-text="请输入TOKEN"
        ></mu-text-field>
        <mu-button style="margin-left:10px;" color="error" @click="enter()">
          <mu-icon left value="launch"></mu-icon>进入
        </mu-button>
        <mu-button style="margin-left:10px;" color="indigo400" @click="add()">
          <mu-icon left value="add_circle"></mu-icon>创建
        </mu-button>
      </mu-flex>
    </mu-flex>
    <mu-flex justify-content="center" v-if="topic == null">
      <mu-flex justify-content="center">
        <pre style="color:red">
          _____                   _______                  _______                   _____                    _____                  
         /\    \                 /::\    \                /::\    \                 /\    \                  /\    \                 
        /::\____\               /::::\    \              /::::\    \               /::\____\                /::\    \                
       /::::|   |              /::::::\    \            /::::::\    \             /::::|   |               /::::\    \               
      /:::::|   |             /::::::::\    \          /::::::::\    \           /:::::|   |              /::::::\    \              
     /::::::|   |            /:::/~~\:::\    \        /:::/~~\:::\    \         /::::::|   |             /:::/\:::\    \             
    /:::/|::|   |           /:::/    \:::\    \      /:::/    \:::\    \       /:::/|::|   |            /:::/__\:::\    \            
   /:::/ |::|   |          /:::/    / \:::\    \    /:::/    / \:::\    \     /:::/ |::|   |           /::::\   \:::\    \           
  /:::/  |::|   | _____   /:::/____/   \:::\____\  /:::/____/   \:::\____\   /:::/  |::|   | _____    /::::::\   \:::\    \          
 /:::/   |::|   |/\    \ |:::|    |     |:::|    ||:::|    |     |:::|    | /:::/   |::|   |/\    \  /:::/\:::\   \:::\    \         
/:: /    |::|   /::\____\|:::|____|     |:::|    ||:::|____|     |:::|    |/:: /    |::|   /::\____\/:::/__\:::\   \:::\____\        
\::/    /|::|  /:::/    / \:::\    \   /:::/    /  \:::\    \   /:::/    / \::/    /|::|  /:::/    /\:::\   \:::\   \::/    /        
 \/____/ |::| /:::/    /   \:::\    \ /:::/    /    \:::\    \ /:::/    /   \/____/ |::| /:::/    /  \:::\   \:::\   \/____/         
         |::|/:::/    /     \:::\    /:::/    /      \:::\    /:::/    /            |::|/:::/    /    \:::\   \:::\    \             
         |::::::/    /       \:::\__/:::/    /        \:::\__/:::/    /             |::::::/    /      \:::\   \:::\____\            
         |:::::/    /         \::::::::/    /          \::::::::/    /              |:::::/    /        \:::\   \::/    /            
         |::::/    /           \::::::/    /            \::::::/    /               |::::/    /          \:::\   \/____/             
         /:::/    /             \::::/    /              \::::/    /                /:::/    /            \:::\    \                 
        /:::/    /               \::/____/                \::/____/                /:::/    /              \:::\____\                
        \::/    /                 ~~                       ~~                      \::/    /                \::/    /                
         \/____/                                                                    \/____/                  \/____/                 
                                                                                                                                     
          _____                    _____                    _____                    _____                    _____                  
         /\    \                  /\    \                  /\    \                  /\    \                  /\    \                 
        /::\    \                /::\____\                /::\    \                /::\    \                /::\    \                
       /::::\    \              /:::/    /               /::::\    \              /::::\    \              /::::\    \               
      /::::::\    \            /:::/    /               /::::::\    \            /::::::\    \            /::::::\    \              
     /:::/\:::\    \          /:::/    /               /:::/\:::\    \          /:::/\:::\    \          /:::/\:::\    \             
    /:::/__\:::\    \        /:::/____/               /:::/__\:::\    \        /:::/__\:::\    \        /:::/__\:::\    \            
    \:::\   \:::\    \      /::::\    \              /::::\   \:::\    \      /::::\   \:::\    \      /::::\   \:::\    \           
  ___\:::\   \:::\    \    /::::::\    \   _____    /::::::\   \:::\    \    /::::::\   \:::\    \    /::::::\   \:::\    \          
 /\   \:::\   \:::\    \  /:::/\:::\    \ /\    \  /:::/\:::\   \:::\    \  /:::/\:::\   \:::\____\  /:::/\:::\   \:::\    \         
/::\   \:::\   \:::\____\/:::/  \:::\    /::\____\/:::/  \:::\   \:::\____\/:::/  \:::\   \:::|    |/:::/__\:::\   \:::\____\        
\:::\   \:::\   \::/    /\::/    \:::\  /:::/    /\::/    \:::\  /:::/    /\::/   |::::\  /:::|____|\:::\   \:::\   \::/    /        
 \:::\   \:::\   \/____/  \/____/ \:::\/:::/    /  \/____/ \:::\/:::/    /  \/____|:::::\/:::/    /  \:::\   \:::\   \/____/         
  \:::\   \:::\    \               \::::::/    /            \::::::/    /         |:::::::::/    /    \:::\   \:::\    \             
   \:::\   \:::\____\               \::::/    /              \::::/    /          |::|\::::/    /      \:::\   \:::\____\            
    \:::\  /:::/    /               /:::/    /               /:::/    /           |::| \::/____/        \:::\   \::/    /            
     \:::\/:::/    /               /:::/    /               /:::/    /            |::|  ~|               \:::\   \/____/             
      \::::::/    /               /:::/    /               /:::/    /             |::|   |                \:::\    \                 
       \::::/    /               /:::/    /               /:::/    /              \::|   |                 \:::\____\                
        \::/    /                \::/    /                \::/    /                \:|   |                  \::/    /                
         \/____/                  \/____/                  \/____/                  \|___|                   \/____/                 
                                                                                                                                     
        </pre>
      </mu-flex>
    </mu-flex>
    <mu-container v-if="topic != null">
      <mu-scale-transition>
        <mu-card style="width: 100%; margin: 0 auto;" raised :model="topic">
          <mu-card-title :title="topic.title" :sub-title="topic.ct"></mu-card-title>
          <mu-card-text v-html="topic.content"></mu-card-text>
          <mu-card-actions>
            <mu-button flat small color="red" @click="openDialog(topic.token, topic.title)">
              <mu-icon value="reply"></mu-icon>回复
            </mu-button>
            <mu-button flat small color="grey500" @click="share(topic.token)">
              <mu-icon value="share"></mu-icon>
              {{topic.token}}
            </mu-button>
          </mu-card-actions>
        </mu-card>
      </mu-scale-transition>
      <br>
      <mu-divider></mu-divider>
      <br>
      <mu-container v-for="re in topic.children" :key="re.token">
        <mu-scale-transition>
          <mu-card style="width: 100%; margin: 0 auto;">
            <mu-card-title :title="re.title" :sub-title="re.ct"></mu-card-title>
            <mu-card-text v-html="re.content"></mu-card-text>
            <mu-card-actions>
              <mu-button flat small color="red" @click="openDialog(re.token, re.title)">
                <mu-icon value="reply"></mu-icon>回复
              </mu-button>
              <mu-button flat small color="grey500" @click="share(re.token)">
                <mu-icon value="share"></mu-icon>
                {{re.token}}
              </mu-button>
            </mu-card-actions>
          </mu-card>
        </mu-scale-transition>
        <br>
        <mu-divider></mu-divider>
      </mu-container>
    </mu-container>
    <mu-dialog
      width="800"
      transition="slide-bottom"
      :title="retopic.title"
      scrollable
      :open.sync="replyDailog"
    >
      <mu-form :model="retopic">
        <mu-form-item prop="input" label label-float>
          <mu-text-field v-model="retopic.title" placeholder="标题" color="error"></mu-text-field>
        </mu-form-item>
        <vue-editor
          v-model="retopic.content"
          placeholder="内容"
          :editorToolbar="customToolbar"
        ></vue-editor>
      </mu-form>
      <mu-button slot="actions" flat color="error" @click="reply">
        <mu-icon left value="reply"></mu-icon>回复
      </mu-button>
      <mu-button slot="actions" flat color="grey500" @click="closeDialog">
        <mu-icon left value="block"></mu-icon>关闭
      </mu-button>
    </mu-dialog>
  </mu-container>
</template>
<script>
import { VueEditor } from "vue2-editor";

export default {
  components: {
    VueEditor
  },
  data() {
    return {
      alert: true,
      token: null,
      topic: null,
      retopic: {
        title: "",
        content: ""
      },
      replyDailog: false,
      customToolbar: [
        // [{ font: [] }],
        // [{ header: [false, 1, 2, 3, 4, 5, 6] }],
        // [{ size: ["small", false, "large", "huge"] }],
        ["bold", "italic", "underline", "strike"],
        [
          { align: "" },
          { align: "center" },
          { align: "right" },
          { align: "justify" }
        ],
        [{ header: 1 }, { header: 2 }],
        ["blockquote", "code-block"],
        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
        [{ script: "sub" }, { script: "super" }],
        [{ indent: "-1" }, { indent: "+1" }],
        [{ color: [] }, { background: [] }],
        ["link", "image", "video"],
        // ["link", "image", "video", "formula"],
        // [{ direction: "rtl" }],
        ["clean"]
      ]
    };
  },
  created() {
    this.token = this.$route.params.token;
    this.getTopic(this.token);
  },
  methods: {
    getTopic(token) {
      var _this = this;
      const loading = this.$loading();
      if (token) {
        this.$http
          .get("/t/" + this.token)
          .then(response => {
            let data = response.data;
            console.log(data);
            if (data.result == "success") {
              _this.topic = data.topic;
            } else {
            }
            loading.close()
          })
          .catch(err => {
            console.log(err);
            loading.close()
          });
      }else{
        loading.close()
      }
    },
    enter() {
      if (!this.token) {
        this.$refs.token.focus();
      } else {
        console.log("test2:", this.token);
        this.getTopic(this.token)
        // _this.$router.push({ name: "topic", params: { token: this.token } });
      }
    },
    add() {
      this.$router.push({ name: "add" });
    },
    openDialog(id, name) {
      this.replyDailog = true;
      this.retopic.title = '回复: ' + name
    },
    closeDialog() {
      this.replyDailog = false;
    },
    reply() {
      console.log("terste");
    },
    share(token) {
      console.log("token--->", token);
      let _this = this;
      if (!_this.token) {
        this.$refs.token.focus();
      } else {
        console.log(_this.token);
      }
    }
  }
};
</script>